<form [formGroup]="dynamicForm">
  <div *ngFor="let control of config" class="form-group">
    <div>
      <div class="form-group" [ngClass]="{'has-feedback': ['text', 'number'].indexOf(control.type) > -1,'has-success': dynamicForm.controls[control.key].dirty && dynamicForm.controls[control.key].valid, 'has-error': dynamicForm.controls[control.key].dirty && !dynamicForm.controls[control.key].valid }">
        <label class="control-label">{{control.label}}</label>
        <input *ngIf="control.type === 'text' || control.type === 'number'" [type]="control.type" class="form-control" [formControlName]="control.key"
        />
        <select *ngIf="!control.setOptions && control.type === 'select'" class="form-control" [formControlName]="control.key">
          <option *ngFor="let op of control.options" [value]="op.id">{{op.text}}</option>
        </select>
        <select2 *ngIf="!control.setOptions && control.type === 'select2'" [options]="control.options" [formControlName]="control.key"></select2>
        <radio-group *ngIf="!control.setOptions && control.type === 'radio'" [options]="control.options" class="radio" [formControlName]="control.key"></radio-group>
        <radio-with-input *ngIf="!control.setOptions && control.type === 'radio-with-input'" [options]="control.options" class="checkbox" [formControlName]="control.key"></radio-with-input>
        <checkbox-group *ngIf="!control.setOptions && control.type === 'checkbox'" [options]="control.options"  class="checkbox"[formControlName]="control.key"></checkbox-group>
        <checkbox-with-input *ngIf="!control.setOptions && control.type === 'checkbox-with-input'" [options]="control.options" class="checkbox" [formControlName]="control.key"></checkbox-with-input>
        <date-time-picker *ngIf="['day', 'hour', 'minute'].indexOf(control.type) > -1" [accuracy]="control.type" [formControlName]="control.key"></date-time-picker>
        <upload-image *ngIf="control.type === 'upload-image'" [limit]="control.limit" [formControlName]="control.key"></upload-image>
        <dynamic-list *ngIf="control.type === 'dynamic-list'" [formControlName]="control.key" [config]="control.listConfig"></dynamic-list>
        <span *ngIf="['text', 'number'].indexOf(control.type) > -1" class="form-control-feedback" [ngClass]="{'glyphicon': true, 'glyphicon-ok': dynamicForm.controls[control.key].dirty && dynamicForm.controls[control.key].valid, 'glyphicon-remove': dynamicForm.controls[control.key].dirty && !dynamicForm.controls[control.key].valid }" aria-hidden="true"></span>
      </div>
    </div>
  </div>
  <!-- <div>
    <label class="control-label">Model: </label>
    <pre>{{dynamicForm.value | json}}</pre>
  </div>
  <div>
    <label class="control-label">Form status: </label>
    <pre>{{ dynamicForm.status | json }}</pre>
  </div> -->
</form>
